﻿/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2015-06-18 19:18:31
 * @version $Id$
 */
var main = {
    winW: null,
    winH: null,
    browser: null,
    init: function() {
        main.browser = navigator.userAgent;
        $(window).resize(function() {
            main.resize();
        });
        main.visual.init();
        main.resize();
    },
    resize: function() {
        main.winW = ($(window).width() <= 1280) ? 1280 : $(window).width();
        main.winH = $(window).height();
        $('#dBody').css('height', main.winH);
        main.visual.set();
    },
    visual: {
        box: null,
        items: null,
        infoBoxW: null,
        imgOriW: null,
        imgOriH: null,
        autoPlay: false,
        delay: 15000,
        btn: null,
        len: null,
        cnt: 0,
        moved: false,
        clicked: false,
        mode: 0, // 0:original, 1:zoom1, 2:chage
        gap: [0, 5, 6],
        overed: 0,
        init: function() {
            var visual = main.visual;
            visual.box = $('.main-visual > div');
            visual.len = $('.main-visual > div').length;
            visual.infoBoxW = $('.main-visual > div .info-box').width();
            visual.btn = $('.main-control a');
            visual.items = [];
            for (var i = 0; i < visual.len; i++) {
                visual.items.push($('.main-visual > div').eq(i));
            }
            visual.box.each(function(idx) {
                $(this).find('img').load(function() {
                    visual.imgOriW = $(this).width();
                    visual.imgOriH = $(this).height();
                    $(this).css({
                        "margin-left": -$(this).width() / 2,
                        'margin-top': -$(this).height() / 2
                    });
                    $(this).parent().css({
                        'margin-top': $(this).parent().height() * (parseInt('-6%') / 100)
                    });
                })
            });
            visual.btn.each(function(idx) {
                $(this).click(function() {
                    if (main.visual.moved) return;
                    if (idx == 1) {
                        // next...
                        main.visual.mode = main.visual.mode + 2;
                        if (main.visual.mode > 3) main.visual.change('next');
                        else main.visual.zoom();
                    } else {
                        // prev...
                        main.visual.mode = main.visual.mode - 2;
                        if (main.visual.mode < -3) main.visual.change('prev');
                        else main.visual.zoom();
                    }
                    return false;
                }).on('mouseover focus', function() {
                    $(this).find('> img').stop().animate({
                        'opacity': 1
                    }, {
                        queue: false,
                        duration: 250
                    });
                }).on('mouseleave focusout', function() {
                    $(this).find('> img').stop().animate({
                        'opacity': 0.3
                    }, {
                        queue: false,
                        duration: 250
                    });
                });
            });
            if(visual.autoPlay){
                var timeOutfn = function(){
                    var temp = setInterval(function(){
                        main.visual.mode = main.visual.mode + 2;
                        if (main.visual.mode > 3) {
                            main.visual.change('next');
                            clearInterval(temp);
                        }else{
                            main.visual.zoom();
                        }     
                    },1000);
                }
                var timeout = setInterval(function(){
                    timeOutfn();
                },main.visual.delay);
                $("#dBody").hover(function(){
                    clearInterval(timeout);
                },function(){
                    timeout = setInterval(function(){
                        timeOutfn();
                    },main.visual.delay);
                });
            }
            visual.btn.find('> img').css('opacity', 0.3);
            visual.set();
            visual.countText();
            //guide-icon motion
            visual.guide.init();
        },
        guide: {
            init: function() {
                var guideIcon = $('.guide-icon');
                guideIcon.css({
                    'top': '70%',
                    'opacity': 0
                }).stop().animate({
                    'top': '53%',
                    'opacity': 1
                }, {
                    duration: 1000,
                    easing: 'easeOutExpo',
                    complete: function() {
                        setTimeout(main.visual.guide.out, 1500);
                    }
                });
            },
            out: function() {
                var guideIcon = $('.guide-icon');
                guideIcon.stop().animate({
                    'opacity': 0
                }, {
                    duration: 1000,
                    easing: 'easeInOutExpo',
                    complete: function() {
                        guideIcon.hide();
                    }
                });
            }
        },
        set: function() {
            var posX;
            var imgW, imgH, gap = main.visual.gap;
            var mode = Math.abs(main.visual.mode);
            switch (main.visual.mode) {
                case 0:
                    main.visual.imgOriW = $('.main-visual > div img').eq(0).width();
                    main.visual.imgOriH = $('.main-visual > div img').eq(0).height();
                    break;
                case 1:
                    main.visual.imgOriW = $('.main-visual > div img').eq(0).width() * 1.1;
                    main.visual.imgOriH = $('.main-visual > div img').eq(0).height() * 1.1;
                    break;
                case 2:
                    main.visual.imgOriW = $('.main-visual > div img').eq(0).width() * 1.15;
                    main.visual.imgOriH = $('.main-visual > div img').eq(0).height() * 1.15;
                    break;
            }
            $('.main-visual > div img').css({
                "margin-left": -$('.main-visual > div img').eq(0).width() / 2,
                'margin-top': -$('.main-visual > div img').eq(0).height() / 2
            });
            for (var i = 0; i < main.visual.len; i++) {
                if (i == 0) {
                    posX = 0;
                } else if (i == main.visual.len - 1) {
                    posX = (main.visual.mode == 0) ? '-100%' : -100 + (gap[Math.abs(main.visual.mode)]) + '%';
                } else if (i == 1) {
                    posX = (main.visual.mode == 0) ? '100%' : 100 - (gap[Math.abs(main.visual.mode)]) + '%';
                }
                main.visual.items[i].css('left', posX);
            }
        },
        change: function(type) {
            main.visual.mode = 0;
            main.visual.moved = true;
            var visual = main.visual;
            var items = main.visual.items;
            var posX = {
                    'box': 0,
                    'txt': -main.visual.infoBoxW
                },
                depth, gap = main.visual.gap;
            var cnt = 0;
            var mode = Math.abs(visual.mode);
            var speed = (!main.visual.clicked) ? 1000 : 750;
            var ease = (!main.visual.clicked) ? 'easeInOutExpo' : 'easeInExpo';
            var popItem;
            if (type == 'next') {
                popItem = items.shift();
                items.push(popItem);
            } else if (type == 'prev') {
                popItem = items.pop();
                items.unshift(popItem);
            }
            main.visual.overed = main.visual.box.index(items[0]);
            main.visual.items = items;
            main.visual.countText();
            for (var i = 0; i < visual.len; i++) {
                if (i == 0) {
                    posX.box = 0;
                    depth = 30;
                } else if (i == 1) {
                    if (type == 'next') items[i].css('left', '200%');
                    posX.box = (type == 'next') ? 100 - (gap[2]) + '%' : 0;
                    depth = (type == 'next') ? 40 : 20;
                } else if (i == 2) {
                    posX.box = parseInt(items[i].css('left'));
                    depth = 40;
                } else if (i == visual.len - 1) {
                    if (type == 'prev') items[i].css('left', '-200%');
                    posX.box = (type == 'next') ? 0 : -100 + (gap[2]) + '%';
                    depth = (type == 'next') ? 20 : 40;;
                } else if (i == visual.len - 2) {
                    posX.box = parseInt(items[i].css('left'));
                    depth = 50;
                } else {
                    depth = 10;
                }
                items[i].css('z-index', depth).stop().animate({
                    'left': posX.box,
                    'opacity': 1
                }, {
                    queue: false,
                    duration: speed,
                    easing: ease,
                    complete: function() {
                        cnt++;
                        if (cnt >= visual.len) {
                            if (type == 'next') items[cnt - 1].css({
                                'z-index': 10,
                                'left': -100 + (gap[2]) + '%'
                            });
                            else items[1].css({
                                'z-index': 10,
                                'left': 100 - (gap[2]) + '%'
                            });
                            visual.clicked = false;
                            visual.moved = false;
                            visual.mode = 0;
                            visual.zoom(type);
                        }
                    }
                });
                items[i].find('.info-box').stop().animate({
                    'left': posX.txt
                }, {
                    queue: false,
                    duration: speed,
                    easing: ease
                });
            }
        },
        zoom: function(type) {
            var visual = main.visual;
            var items = main.visual.items;
            var posX = {
                    'box': 0,
                    'txt': 0
                },
                depth, gap = main.visual.gap,
                mt = 0,
                h, alpha, img_mt, img_ml;
            var gapPercent;
            var mode = Math.abs(visual.mode);
            var speed = (!main.visual.clicked) ? 1000 : 1000;
            var ease = (!main.visual.clicked) ? 'easeInOutExpo' : 'easeInOutExpo';
            main.visual.moved = true;
            // console.log(visual.infoBoxW);
            for (var i = 0; i < visual.len; i++) {
                if (i == 0) {
                    posX.box = 0;
                    posX.txt = (mode == 0) ? -visual.infoBoxW : (gap[mode]) + '%';
                    depth = 20;
                } else if (i == 1) {
                    posX.box = 100 - (gap[mode]) + '%';
                    posX.txt = -visual.infoBoxW;
                    depth = 30;
                } else if (i == visual.len - 1) {
                    posX.box = -(100 - (gap[mode])) + '%';
                    posX.txt = -visual.infoBoxW;
                    depth = (type) ? 10 : 30;
                } else {
                    depth = 10;
                }
                // change///////////////////////////////////////////////////////////////
                if (type) {
                    if (type == 'next') {
                        if (i == visual.len - 2) {
                            posX.box = -(100 - (gap[mode])) + '%';
                            depth = 30;
                        }
                    } else if (type == 'prev') {
                        if (i == visual.len - 1) {
                            posX.box = -(100 - (gap[mode])) + '%';
                            depth = 30;
                        } else if (i == visual.len - 2) {
                            posX.box = (100 - (gap[mode])) + '%';
                            depth = 30;
                        } else if (i == 1) {
                            posX.box = (100 - (gap[mode])) + '%';
                            depth = 10;
                        }
                    }
                    speed = 800;
                    ease = "easeOutExpo";
                }
                //////////////////////////////////////////////////////////////////////////////////////////
                mt = (mode == 0) ? '-6%' : -(3 * (2 - mode) + 1) + '%';
                mt = items[i].height() * (parseInt(mt) / 100);
                h = (mode == 0) ? '115%' : 100 + (10 * (2 - mode)) + '%';
                alpha = (mode == 2) ? 1 : 0;
                gapPercent = (mode == 0) ? 0 : 5 + (10 * (mode - 1));
                img_mt = Math.round(visual.imgOriH - (visual.imgOriH * (gapPercent / 100))) / -2;
                img_ml = Math.round(visual.imgOriW - (visual.imgOriW * (gapPercent / 100))) / -2;
                items[i].css('z-index', depth).stop().animate({
                    'left': posX.box,
                    'margin-top': mt,
                    'height': h
                }, {
                    queue: false,
                    duration: speed,
                    easing: ease,
                    complete: function() {
                        visual.cnt++;
                        if (visual.cnt >= visual.len) {
                            // console.log('motion complete!!!!!....');
                            visual.moved = false;
                            visual.cnt = 0;
                            if (visual.clicked) {
                                if (main.visual.mode > 0) main.visual.change('next');
                                else main.visual.change('prev');
                            }
                        }
                    }
                });
                items[i].find('img').stop().animate({
                    'margin-top': img_mt,
                    'margin-left': img_ml
                }, {
                    queue: false,
                    duration: speed,
                    easing: ease
                });
                items[i].find('.info-box').stop().animate({
                    'left': posX.txt
                }, {
                    queue: false,
                    duration: speed,
                    easing: ease
                });
                items[i].find('.info-box a').stop().animate({
                    'opacity': alpha
                }, {
                    queue: false,
                    duration: speed,
                    easing: 'easeInOutCubic'
                });
            }
        },
        countText: function() {
            var prevNum = (main.visual.overed == 0) ? main.visual.len - 1 : main.visual.overed - 1;
            var nextNum = (main.visual.overed == main.visual.len - 1) ? 0 : main.visual.overed + 1;
            main.visual.btn.find('p strong').text(main.visual.len);
            main.visual.btn.eq(0).find('p span').text(prevNum + 1);
            main.visual.btn.eq(1).find('p span').text(nextNum + 1);
        }
    }
}
$(function() {
    main.init();
});
